<template>
  <div class="content">
    <Breadcrumb :items="['采购管理', '零件列表']" />
   
    <div class="select">
      <a-button type="primary" disabled>选择零件类型</a-button>
      <a-tree-select
        :data="treeData"
        placeholder="Please select ..."
        style="width: 300px"
        @change="changeTreeList"
        treeDefaultExpandedKeys
        tree-check-strictly
        :fieldNames="{
          key: 'id',
          title: 'name',
          children: 'son',
        }"
      ></a-tree-select>
      <a-button type="primary" @click="addCat" style="margin-left: 20px;">新增零件</a-button>
    </div>

    <a-table :columns="columns" :data="data">
      <template #province="{ record, rowIndex }">
        <a-input-number
          placeholder="Please Enter"
          :default-value="record.stock"
          :min="0"
          mode="button"
          class="input-demo"
          @change="addColumnsCount(record, $event)"
          @blur="addColumnsCounts(record, $event)"
        />
      </template>
      <template #optional="{ record }">
        <a-button
          type="text"
          size="small"
          status="danger"
          @click="changeColumnsInfo(record)"
        >
          <template #icon>
            <icon-edit />
          </template>
          修改
        </a-button>
        <a-popconfirm content="你确定要删除吗?" @ok="delItem(record)">
          <a-button type="text" size="small">
            <template #icon>
              <icon-delete />
            </template>

            删除</a-button
          >
        </a-popconfirm>
      </template>
    </a-table>

    <a-modal
      v-model:visible="visible"
      title="新增零件"
      @cancel="handleCancel"
      @before-ok="handleBeforeOk"
    >
      <a-form :model="form" resetFields>
        <a-form-item field="name" label="零件名称">
          <a-input v-model="form.name" />
        </a-form-item>
        <a-form-item field="cat_second_id" label="零件二级分类">
          <a-tree-select
            :data="treeData"
            placeholder="Please select ..."
            style="width: 300px"
            @change="addchangeTreeList"
            tree-check-strictly
            :fieldNames="{
              key: 'id',
              title: 'name',
              children: 'son',
            }"
          ></a-tree-select>
        </a-form-item>
        <a-form-item field="material" label="零件材质">
          <a-select v-model="form.material">
            <a-option value="1">铝</a-option>
            <a-option value="2">铜</a-option>
            <a-option value="3">铁</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="process_type" label="零件加工性质">
          <a-select v-model="form.process_type">
            <a-option value="1">标准件</a-option>
            <a-option value="2">钣金</a-option>
            <a-option value="3">机加工</a-option>
            <a-option value="4">亚力克</a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-drawer
      :width="1000"
      :visible="changeStatus"
      @ok="handleOk"
      @cancel="cancel"
      unmountOnClose
    >
      <a-form :model="columnsInfo">
        <a-form-item field="id" label="id">
          <a-input v-model="columnsInfo.id" disabled />
        </a-form-item>
        <a-form-item field="cat_second_id" label="cat_second_id">
          <a-input v-model="part_cat_second_id" disabled />
        </a-form-item>
        <a-form-item field="name" label="name">
          <a-input
            v-model="columnsInfo.name"
            placeholder="please enter your name..."
          />
        </a-form-item>
        <a-form-item field="material" label="material">
          <a-select
            v-model="columnsInfo.material"
            :placeholder="columnsInfo.material"
            value="1"
          >
            <a-option value="1">铝</a-option>
            <a-option value="2">铜</a-option>
            <a-option value="3">铁</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="process_type" label="process_type">
          <a-select
            v-model="columnsInfo.process_type"
            :placeholder="columnsInfo.process_type"
          >
            <a-option value="1">标准件</a-option>
            <a-option value="2">钣金</a-option>
            <a-option value="3">机加工</a-option>
            <a-option value="4">亚力克</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="external_price" label="external_price">
          <a-input
            v-model="columnsInfo.external_price"
            placeholder="please enter your external_price..."
          />
        </a-form-item>
        <a-form-item field="cost_price" label="cost_price">
          <a-input
            v-model="columnsInfo.cost_price"
            placeholder="please enter your cost_price..."
          />
        </a-form-item>
        <a-form-item field="buy_address" label="buy_address">
          <a-input
            v-model="columnsInfo.buy_address"
            placeholder="please enter your buy_address..."
          />
        </a-form-item>
        <a-form-item field="is_aftersale_part" label="is_aftersale_part">
          <a-select
            v-model="columnsInfo.is_aftersale_part"
            :placeholder="columnsInfo.is_aftersale_part"
          >
            <a-option value="1">是</a-option>
            <a-option value="0">否</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="remark" label="remark">
          <a-input
            v-model="columnsInfo.remark"
            placeholder="please enter your remark..."
          />
        </a-form-item>
      </a-form>
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import {
    getAllPartList,
    queryPartList,
    addPartInfo,
    addCount,
    delCount,
    editPartInfo,
  } from '@/api/part';
  import { Message } from '@arco-design/web-vue';

  onMounted(() => {
    getTreeList();
  });
  const getTreeList = () => {
    getAllPartList().then((res) => {
      defaultTreeData.value = res.data;

      defaultTreeData.value = filterList(defaultTreeData.value);
    });
  };

  const filterList = (i) => {
    const array = [];
    i.map((v) => {
      v.id = v.id.toString();
      if (v.son && v.son.length > 0) {
        for (let key of v.son) {
          key.id = v.id + key.id;
        }
        array.push(v);
      }
    });

    return array;
  };

  const defaultTreeData = ref<any>([]);

  const treeData = ref(defaultTreeData);
  const part_cat_id = ref();
  const part_cat_second_id = ref();
  const changeTreeList = (e) => {
    part_cat_second_id.value = e.slice(1);
    part_cat_id.value = e.slice(0, 1);
    getTableData();
  };

  const data = ref();
  const getTableData = () => {
    const parmes = {
      page: 1,
      page_size: 10,
      part_cat_id: part_cat_id.value,
      part_cat_second_id: part_cat_second_id.value,
    };
    queryPartList(parmes).then((res) => {
      data.value = filterColums(res.data.data);
    });
  };

  const filterColums = (i) => {
    i.forEach((v) => {
      switch (v.is_aftersale_part) {
        case 0:
          v.is_aftersale_part = '否';
          break;
        case 1:
          v.is_aftersale_part = '是';
          break;
      }

      switch (v.material) {
        case 1:
          v.material = '铝';
          break;
        case 2:
          v.material = '铜';
          break;
        case 3:
          v.material = '铁';
          break;
      }

      switch (v.process_type) {
        case 1:
          v.process_type = '标准件';
          break;
        case 2:
          v.process_type = '钣金';
          break;
        case 3:
          v.process_type = '机加工';
          break;
        case 4:
          v.process_type = '亚克力';
          break;
      }
    });

    return i;
  };

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      align: 'center',
      width:'50'
    },
    {
      title: '零件名称',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '零部件',
      dataIndex: 'cat_name',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      align: 'center',
    },
    {
      title: '售后配件',
      dataIndex: 'is_aftersale_part',
      align: 'center',
    },
    {
      title: '材质',
      dataIndex: 'material',
      align: 'center',
    },
    {
      title: '加工性质',
      dataIndex: 'process_type',
      align: 'center',
    },
    {
      title: '报价',
      dataIndex: 'external_price',
      align: 'center',
    },
    {
      title: '库存',
      dataIndex: 'stock',
      align: 'center',
    },
    {
      title: '一级分类',
      dataIndex: 'cat_name',
      align: 'center',
    },
    {
      title: '二级分类',
      dataIndex: 'cat_second_name',
      align: 'center',
    },
    {
      title: '购买地址',
      dataIndex: 'buy_address',
      align: 'center',
    },
    {
      title: '添加库存',
      slotName: 'province',
      align: 'center',
      width:'150'
    },
    { title: '操作', slotName: 'optional', align: 'center' },
  ];

  //新增零件
  const addCat = () => {
    visible.value = true;
  };

  const visible = ref(false);
  const form = reactive({
    name: '',
    cat_second_id: '',
    material: '',
    process_type: '',
  });

  const handleBeforeOk = (done) => {
    console.log(form);
    window.setTimeout(() => {
      addPartInfo(form).then((res: any) => {
        if (res.code === 200) {
          getTableData();
          Message.success('添加零件成功');
          for (let key in form) {
            form[key] = '';
          }
        }
      });
      done();
    }, 3000);
  };
  const handleCancel = () => {
    getTableData();
    visible.value = false;
  };

  const addchangeTreeList = (e) => {
    part_cat_second_id.value = e.slice(1);
    part_cat_id.value = e.slice(0, 1);
    form.cat_second_id = part_cat_second_id.value;
  };

  const id = ref();
  const count = ref('');
  //加减库存
  const addColumnsCount = (record, e) => {
    count.value = e;
    id.value = record.id;

    const msg = {
      id: record.id,
      number: count.value,
    };

    addCount(msg).then((res: any) => {
      if (res.code === 200) {
        getTableData();
        Message.success('修改数量成功');
      }
    });
  };

  const addColumnsCounts = (record, e) => {
    count.value = e;
    id.value = record.id;

    const msg = {
      id: record.id,
      number: count.value,
    };

    addCount(msg).then((res: any) => {
 
      if (res.code === 200) {
        getTableData();
        Message.success('修改数量成功');
      }
    });
  };

  //修改零件信息
  const changeStatus = ref(false);
  const handleOk = () => {
    changeStatus.value = false;
    console.log(columnsInfo.value);
    const Info = {
      id: columnsInfo.value.id,
      cat_second_id: part_cat_second_id.value,
      name: columnsInfo.value.name,
      material: columnsInfo.value.material,
      process_type: columnsInfo.value.process_type,
      external_price: columnsInfo.value.external_price,
      cost_price: columnsInfo.value.cost_price,
      buy_address: columnsInfo.value.buy_address,
      is_aftersale_part: columnsInfo.value.is_aftersale_part,
      remark: columnsInfo.value.remark,
    };
    switch (Info.material) {
      case '铝':
        Info.material = 1;
        break;
      case '铜':
        Info.material = 2;
        break;
      case '铁':
        Info.material = 3;
        break;
      default:
        Info.material;
        break;
    }
    switch (Info.process_type) {
      case '标准件':
        Info.process_type = 1;
        break;
      case '钣金':
        Info.process_type = 2;
        break;
      case '机加工':
        Info.process_type = 3;
        break;
      case '亚克力':
        Info.process_type = 4;
        break;
      default:
        Info.process_type;
        break;
    }

    switch (Info.is_aftersale_part) {
      case '否':
        Info.is_aftersale_part = 0;
        break;
      case '是':
        Info.is_aftersale_part = 1;
        break;
      default:
        Info.is_aftersale_part;
        break;
    }
    console.log(Info);

    editPartInfo(Info).then((res:any) => {
      console.log(res);   if (res.code === 200) {
        Message.success('修改成功');
        getTableData();
      }
    });
  };
  const cancel = () => {
    changeStatus.value = false;
    getTableData();
  };
  const columnsInfo = ref<any>();

  const changeColumnsInfo = (e) => {
    columnsInfo.value = e;


    changeStatus.value = true;
  };

  //删除
  const delItem = (v) => {
    delCount({ id: v.id }).then((res: any) => {
  
      if (res.code === 200) {
        Message.success('删除成功');
        getTableData();
      }
    });
  };
</script>

<style scoped lang="less">
  .content {
    padding: 20px;
    box-sizing: border-box;

    .select {
      margin: 20px 0;
      button {
        margin-right: 20px;
      }
    }
  }
</style>
